<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <meta charset="UTF-8">
    <title>database-export</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../../../static/assetss/images/fav.png" th:href="@{/assetss/images/fav.png}">
    <link rel="stylesheet" href="../../../static/bootstrap/css/bootstrap.min.css" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../../../static/bootstrap/select/bootstrap-select.min.css" th:href="@{/bootstrap/select/bootstrap-select.min.css}">
    <link rel="stylesheet" href="../../../static/css/index.css" th:href="@{/css/index.css}">
    <script src="../../../static/js/jquery-3.3.1.js" th:src="@{/js/jquery-3.3.1.js}"></script>
    <script src="../../../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script src="../../../static/bootstrap/select/bootstrap-select.min.js" th:src="@{/bootstrap/select/bootstrap-select.min.js}"></script>
</head>
<style>
    .body{
        margin-left: 200px;
        margin-right: 200px;
    }
    .table{
        margin-bottom: 0px !important;

    }
    .sp {
        width: 32px;
        height: 32px;
        clear: both;
        margin: 20px auto;
    }

    /* Spinner Circle Rotation */
    .sp-circle {
        border: 4px rgba(0, 0, 0, 0.25) solid;
        border-top: 4px black solid;
        border-radius: 50%;
        -webkit-animation: spCircRot .6s infinite linear;
        animation: spCircRot .6s infinite linear;
    }

    @-webkit-keyframes spCircRot {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(359deg);
        }
    }
    @keyframes spCircRot {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(359deg);
        }
    }
    .top-nav{
        height: 8%;
        width: 100%;
        box-shadow: none;
        position: fixed;
        top: 0;
        background-color: white;
    }
    #backToTopBtn{
        width: 40px;
        background-repeat: no-repeat;
        background-position:center;
        position: fixed;
        bottom: 5%;
        right:2%;
        cursor: pointer;
        display: none;
    }
</style>
<body>
<div class="top-nav">
    <div style="text-align: left;margin-left: 10%;">
        <img style="width: 80px" th:src="@{/assetss/images/fav.png}"><span style="font-size: 30px;margin-left: 10px;">database-export 数据库表html预览</span>
        <div style="display: inline-block;"><!--position: fixed;right:20%;top:2%;-->
            <select id="db-contents" onchange="selectOnChang(this)" data-size="10" class="selectpicker" data-live-search="true" data-live-search-placeholder="搜索" data-actions-box="true" th:title="${dbBaseInfo.dbName}">
            </select>
        </div>

    </div>
</div>
<div id="app" style="overflow-x: hidden">
    <div class="body" id="body" style="margin-top: 40px;">
        <div class="row">
            <div class="sp sp-circle"></div>
            <h5 style="text-align: center">正在加载中...</h5>
        </div>
    </div>
</div>
<img id="backToTopBtn" title="回到顶部" onclick="topFunction()" th:src="@{/assetss/images/back-to-top.png}"></span>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var ctx = [[@{/}]];
    var ip = [[${dbBaseInfo.ip}]];
    var port = [[${dbBaseInfo.port}]];
    var dbName = [[${dbBaseInfo.dbName}]];
    var userName = [[${dbBaseInfo.userName}]];
    var password = [[${dbBaseInfo.password}]];
    var dbKind = [[${dbBaseInfo.dbKind}]];
</script>
<script src="../../../static/js/docHtml.js" th:src="@{/js/docHtml.js}"></script>
</body>

</html>